<template>
  <view class="pay">
    <!-- 获取用户地址  开始 -->
    <button @click="getAddress" v-if="!address">获取用户地址</button>
    <view v-else class="user-address">
      <view class="detail-address"> {{ detailAddress }} </view>
      <view class="detail-user">
        <view class="userName">{{ address.userName }}</view>
        <view class="telNum"> {{ address.telNumber }} </view>
      </view>
    </view>
    <!-- 获取用户地址  结束 -->
    <!-- 商品数量价格等  开始 -->
    <view class="goods-list">
      <view class="oods-title">选中的商品：</view>
      <view class="goods" v-for="item in list" :key="item.goods_id">
        <!-- 图片 -->
        <view class="goods-img">
          <u-image
            width="100%"
            mode="widthFix"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <!-- 名称 -->
        <view class="goods-info">
          <!-- 商品名称 -->
          <view class="goods-name u-line-2">{{ item.goods_name }}</view>
          <!-- 商品编辑栏 -->
          <view class="goods-tool">
            <!-- 商品价格 -->
            <view class="goods-price">￥{{ item.goods_price }}</view>
            <!-- 商品数量 -->
            <view class="goods-count">
              <view class="goods-num">x {{ item.count }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 全选状态数据栏 -->
      <view class="status-tool">
        <!-- 总价 -->
        <view class="price">
          合计：<text>￥{{ allPrice }}</text>
        </view>
        <!-- 结算 -->
        <view class="settle" @click="goPay"> 去支付{{ allCount }} </view>
      </view>
    </view>
    <!-- 商品数量价格等  结束 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: null,
    };
  },
  computed: {
    // 详细地址名
    detailAddress() {
      if (!this.address) return null;
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
    list() {
      return this.$store.state.list.filter((goods) => goods.checked);
    },

    // 商品总价
    allPrice() {
      return this.$store.getters.allPrice;
    },
    // 商品总数
    allCount() {
      // return this.$store.getters.allCount;
      return this.$store.getters.allCount;
    },
  },
  onLoad() {
    console.log(83, this.$store.state.list);
  },
  methods: {
    async getAddress() {
      const [err, res] = await uni.chooseAddress();
      this.address = res;
      console.log(res);
    },
    async goPay() {
      // 判断用户获取了收货地址后才发起支付请求
      if (!this.address) {
        wx.showToast({
          title: "您还没有选购商品",
          icon: "none",
        });
        return;
      }
      // 获取用户信息
      const [err1, { encryptedData, rawData, iv, signature }] =
        await uni.getUserProfile({ desc: "用于完善会员资料" });

      console.log(102, { encryptedData, rawData, iv, signature });
      // 获取用户code 登录凭证  还要发送 一个 code 值 登录凭据  给后台  （code 腾讯那边的验证 5分钟之内有效）
      const [err2, { code }] = await uni.login();
      console.log(code);
      // 提交数据到后台，拿到服务器生成的后台
      const res3 = await this.$u.post("/users/wxlogin", {
        encryptedData,
        rawData,
        iv,
        signature,
        code,
      });
      console.log(res3);
      const { token } = res3.message;
      // 已经拿到token参数，进行创建订单 获取创建订单的参数
      const orderParams = {
        // 是	string	订单总价格
        order_price: this.allPrice,
        // 是	string	收货地址
        consignee_addr: this.detailAddress,
        // 是	Array	订单数组
        goods: this.list.map((goods) => ({
          // 	商品id
          goods_id: goods.goods_id,
          // 	购买的数量
          goods_number: goods.count,
          // 单价
          goods_price: goods.goods_price,
        })),
      };
      // 创建订单
      const res4 = await this.$u.post("/my/orders/create", orderParams, {
        Authorization: token,
      });
      console.log(res4);
      // 获取支付参数
      const res5 = await this.$u.post(
        "/my/orders/req_unifiedorder",
        { order_number: res4.message.order_number },
        { Authorization: token }
      );
      const { pay } = res5.message;
      // 把参数发送给微信，调用微信的支付api
      uni.requestPayment(pay);
    },
  },
};
</script>

<style lang="scss">
.pay {
  button {
  }

  .user-address {
    padding: 20px;
    .detail-address {
      font-size: 30rpx;
      font-weight: 700;
    }

    .detail-user {
      display: flex;
      justify-content: space-between;
      .userName {
      }

      .telNum {
        flex: 1;
        margin-left: 35rpx;
      }
    }
  }
  .goods-list {
    .goods {
      display: flex;
      padding: 10rpx;

      .goods-img {
        flex: 2;
        padding: 10rpx;
      }

      .goods-info {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .goods-tool {
          display: flex;
          justify-content: space-between;
          .goods-price {
            font-size: 30rpx;
            color: #eb4450;
          }

          .goods-count {
            width: 150rpx;
            justify-content: space-between;
            display: flex;
          }
        }
      }
    }
  }
  .status-tool {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: #fff;
    height: 80rpx;
    border-top: 1rpx solid #eee;
    display: flex;
    padding: 0 10rpx;
    align-items: center;
    justify-content: space-between;

    .price {
      flex: 1;
      padding: 0 30rpx;
      text {
        font-size: 30rpx;
        color: #eb4450;
      }
    }
    .settle {
      width: 170rpx;
      height: 50rpx;
      font-size: 24rpx;
      border-radius: 25rpx;
      background-color: #eb4450;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>